<template>
    <hl-page :hidden-tab-bar="false" title="阿玛迪斯">
        <div class="content" slot="content">
            <div class="buy-item" @click="goBuy(0)">
                <img src="../assets/images/buy_jj.jpg" class=""/>
            </div>
            <div class="buy-item" @click="goBuy(1)">
                <img src="../assets/images/buy_gq.jpg" class=""/>
            </div>
        </div>
        <hl-tabbar slot="tab" :active="active" @tabBarSelect="changeTab"/>
    </hl-page>
</template>

<script>
    import HlTabbar from "../components/hl-tabbar";
    import HlPage from "../components/hl-page";

    export default {
        components: {
            HlPage,
            HlTabbar
        },
        name: "index",
        data() {
            return {
                active: 0
            }
        },
        methods: {
            goBuy(index) {
                this.$router.push({path: '/buy', query: {index: index}})
            },
            changeTab(item, index) {
                switch (index) {
                    case 0:
                        this.$router.push('/');
                        break;
                    case 1:
                        this.$router.push('/team');
                        break;
                    case 2:
                        this.$router.push('/help');
                        break;
                    case 3:
                        this.$router.push('/me');
                        break;
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .app-container {
        width: 100%;
        height: 100%;
    }

    .buy-item {
        height: auto;
        margin-bottom: 20px;
        background: #fff;
        padding: 20px;
        /*display: flex;*/
        > img {
            width: 100%;
            height: auto;
        }
    }
</style>